/**
 *
 * Copyright 2015 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

html, body {
  font-family: Arial;
  background: #FAFAFA;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  min-width: 320px;
  font-family: 'Roboto', Helvetica, sans-serif;
  font-weight: 400;
  color: #444;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

.app-container {
  overflow-x: hidden;
  overflow-y: scroll;
  margin-top: 56px;
  /* Not using will-change here because it creates a new initial containing
     block, which will stop any position: fixed children rendering correctly.
   */
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  &.locked {
    overflow-x: hidden;
    overflow-y: hidden;
    margin-top: 0;
  }
}

.app-header {
  pointer-events: none;
  width: 100%;
  height: 110px;
  overflow: hidden;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 150ms cubic-bezier(0,0,0.21,1);

  &::before {
    display: block;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #607D8B;
    transform: translateY(-24px);
    transition: transform 0.233s cubic-bezier(0,0,0.21,1);
    transform-origin: 0 0;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.14),
      0 2px 1px -2px rgba(0,0,0,.2),
      0 1px 3px 0 rgba(0,0,0,.12);
    will-change: transform;
    z-index: 0;
  }

  &.extended {
    pointer-events: auto;

    &::before {
      transform: translateY(0);

      box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),
          0 2px 9px 1px rgba(0,0,0,.12),0 4px 2px -2px rgba(0,0,0,.2);
    }
  }

  &.collapsed {
    transition: transform 900ms cubic-bezier(0,0,0.21,1) 93ms;
    transform: translateY(-103%);
  }
}

.app-header__labels-container {
  width: 100%;
  max-width: 800px;
  padding: 0 16px;
  box-sizing: border-box;
  margin: 0 auto;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  will-change: transform;
  transform: translateY(-24px);
  opacity: 0;
  z-index: 2;
  transition: transform 0.233s cubic-bezier(0,0,0.21,1),
      opacity 0.133s cubic-bezier(0,0,0.21,1);
}

.app-header.extended .app-header__labels-container {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.233s cubic-bezier(0,0,0.21,1),
      opacity 0.333s cubic-bezier(0,0,0.21,1) 0.08s;
}

.app-header__labels {
  color: #FFF;
  font-weight: 500;
  list-style: none;
  padding: 0;
  margin: 0;
  align-self: flex-end;
  height: 136px;
  width: 136px;
  transform: rotate(-90deg) translateX(136px) translateX(10px);
  transform-origin: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &:first-of-type {
    visibility: hidden;
  }
}

.app-header__labels-inner-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.app-header__title {
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 0 16px;
  line-height: 56px;
  color: #FFF;
  z-index: 1;
  position: relative;
  opacity: 1;
}

.app-main {
  flex: 1;
  width: 100%;
  max-width: 800px;
  margin: 24px auto 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.app-main__properties,
.app-main__property,
.app-main__property-state,
.app-main__property-condition,
.app-main__property-engine,
.app-main__engine-labels {
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-main__property-link {
  text-decoration: none;
  display: block;
  outline: none;

  &:focus {
    background: #F0F0F0;
  }
}

.app-main__engines {
  height: 100px;
  display: flex;
  flex-direction: row;
}

.app-main__engine-legend-container {
  flex: 1;
  display: flex;
  align-items: flex-end;

  &.up {
    transform: translateY(-16px);
  }
}

.app-main__engine-legend {
  font-weight: 500;
  font-size: 14px;
  list-style: none;
  margin: 0;
  padding: 0 16px 14px 16px;
  line-height: 0.6;
}

.app-main__engine-legend-item {
  padding-top: 0.8em;

  &::before {
    content: '';
    display: inline-block;
    vertical-align: baseline;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.4em;
  }
}

.app-main__engine-legend-item-layout::before {
  background-color: rgba(144,137,228,1);
}

.app-main__engine-legend-item-paint::before {
  background-color: rgba(144,170,101,1);
}

.app-main__engine-legend-item-composite::before {
  background-color: rgba(69,95,21,1);
}

.app-main__engine-labels-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 16px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app-main__engine-labels {
  height: 136px;
  width: 136px;
  transform: rotate(-90deg) translateX(100%) translateX(36px) translateX(14px);
  transform-origin: 100% 100%;
  font-weight: 500;
  font-size: 15px;
  color: #9E9E9E;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.app-main__engine-labels:first-of-type {
  visibility: hidden;
}

.app-main__engine-labels-item {
  line-height: 24px;
}

.app-main__property {
  border-top: 1px solid #EBEBEB;
  background: #FFF;
  box-shadow: 0 6px 2px rgba(0,0,0,.12),
    0 2px 4px rgba(0,0,0,.24);
}

.app-main__state-labels-container {
  border-top: 1px solid #EBEBEB;
  background: #FFF;
  box-shadow: 0 6px 2px rgba(0,0,0,.12),
    0 2px 4px rgba(0,0,0,.24);
  display: none;
  flex-direction: row;
  padding: 8px 16px;

  &::before {
    flex: 1;
    content: '';
    display: block;
  }
}

.app-main__state-labels {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.app-main__state-label {
  font-size: 12px;
  color: #607D8B;
  width: 136px;
  text-align: center;
}

.app-main__property-link {
  padding: 16px 16px 12px 16px;
}

.app-main__property-state-entry {
  display: flex;
  flex-direction: row;
  height: 24px;
  padding: 12px 0;
}

.app-main__property-condition {
  width: 136px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.app-main__property-engine {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &:focus {
    outline: 2px solid rgba(200,0,200,0.7);
  }

  // Layout
  &::before {
    content: '';
    width: 24px;
    border-radius: 2px;
    height: 6px;
    background: rgba(144,137,228,0.25);
  }

  &.l1::before {
    background: rgba(144,137,228,1);
  }

  &.lx::before {
    background: rgba(0,0,0,0.01);
  }

  // Paint
  .app-main__property-value {
    content: '';
    width: 24px;
    border-radius: 2px;
    height: 6px;
    background: rgba(144,170,101,0.25);
    text-indent: -10000px;
    overflow: hidden;
  }

  &.p1 .app-main__property-value {
    background: rgba(144,170,101,1);
  }

  &.px .app-main__property-value {
    background: rgba(0,0,0,0.01);
  }

  // Composite
  &::after {
    content: '';
    width: 24px;
    border-radius: 2px;
    height: 6px;
    background: rgba(69,95,21,0.25);
  }

  &.c1::after {
    background: rgba(69,95,21,1);
  }

  &.cx::after {
    background: rgba(0,0,0,0.01);
  }
}

.property-name {
  font-family: 'RobotoMono', monospace;
  font-size: 14px;
  color: #263238;
  line-height: 14px;
}

.condition-name {
  flex: 1;
  font-size: 12px;
  color: #607D8B;
  line-height: 14px;
  line-height: 24px;
}

.credits {
  font-size: 12px;
  width: 100%;
  max-width: 800px;
  line-height: 56px;
  padding: 24px 0 384px 0;
  color: rgba(0,0,0,0.54);
  text-align: center;

  a {
    color: rgba(0,0,0,0.87);
  }
}

.property-details {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  outline: none;
}

.property-details__close {
  width: 24px;
  height: 24px;
  border: 0;
  position: absolute;
  cursor: pointer;
  right: 12px;
  top: 12px;
  overflow: hidden;
  text-indent: -20000px;
  background: url();
}

.property-details__background {
  position: absolute;
  background-color: #FFF;
}

.property-details__masthead {
  background: #455A64;
  position: absolute;
  width: 100vw;
  height: 1px;
  left: 0;
  top: 0;
}

.property-details__content {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.property-details__property-name {
  font-family: 'RobotoMono', monospace;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.property-details__content-header {
  height: 100px;
  position: fixed;
  width: 100%;
  background: #455A64;
  z-index: 3;
}

.property-details__property-name {
  position: absolute;
  bottom: 16px;
  left: 16px;
}

.property-details__property-description {
  line-height: 1.5;
  max-width: 432px;

  p {
    margin: 0 0 1em 0;
  }

  .layout {
    color: rgba(144,137,228,1);
  }

  .paint {
    color: rgba(144,170,101,1);
  }

  .composite {
    color: rgba(69,95,21,1);
  }
}

.property-details__content-body {
  color: #606060;
  display: flex;
  flex-direction: column;
  padding: 16px;
  flex: 1;
  margin-top: 100px;
}

.property-details__property-description {
  order: 2;
}

.property-details__breakdown {
  padding: 0 0 8px 0;
  order: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 108px;
  flex: 1;

  .app-main__property-state-entry {
    flex-direction: column;
    height: 88px;
    width: 128px;
    padding: 40px 0 0 0;
    position: relative;
  }

  .app-main__property-condition {
    width: 128px;
  }

  .app-main__property-condition {
    height: 24px;
  }

  .app-main__engine-labels {
    position: absolute;
    top: 24px;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    height: 128px;

    &:first-of-type {
      visibility: visible;
    }
  }

  label {
    font-size: 14px;
    color: #607D8B;
    line-height: 1;
    margin: 0;
    padding: 1em 0 0 0;
  }
}

.property-details {

  &.visible {
    opacity: 1;
    pointer-events: auto;
  }

  &.expanded {
    .property-details__background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }

    .property-details__masthead {
      background: #455A64;
      position: fixed;
      height: 100px;
    }

    .property-details__content {
      opacity: 1;
    }
  }
}
.app-main__property--hidden {
  display: none;
}

.app-main__no-results-message {
  display: none;
  text-align: center;
  padding-top: 40px;
  color: #696969;
}

.app-main__no-results-message--visible {
  display: block;
}

.app-main__no-results-message__filter-text {
  font-weight: bold;
  color: #444;
}

.filter-form__filter-widget {
  top: 10px;
  z-index: 1000;
  width: 0;
  right: 16px;
  position: absolute;
  border-radius: 2px;
  padding: 2px 0;
  pointer-events: auto;

  &::after {
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.87);
    bottom: 2px;
    content: '';
    height: 2px;
    width: 10px;
    position: absolute;
    visibility: hidden;
  }

  &.focused::after {
    visibility: visible;
    width: 100%;
  }
}

.filter-form__input {
  background: 0;
  border: 0;
  margin: 0;
  padding: 4px 0 3px;
  width: 100%;
  height: 20px;
  font-family: Roboto,Helvetica,sans-serif;
  font-weight: 500;
  font-size: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.87);
  border-radius: 0;
  color: #fff;
  outline: none;
    
    /* NOTE: Only work if selectors are seprated @link: https://css-tricks.com/almanac/selectors/p/placeholder */
    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
       color: rgba(255,255,255,0.5);
    }
    
    &::-moz-placeholder { /* Firefox 19+ */
       color: rgba(255,255,255,0.5);
    }
    
    &:-ms-input-placeholder { /* IE 10+ */
       color: rgba(255,255,255,0.5);
    }
    
    &:-moz-placeholder { /* Firefox 18- */
       color: rgba(255,255,255,0.5);
    } 
}

.filter-form__input-icon {
  left: -40px;
  position: absolute;
  top: 0;
  background: center center no-repeat;
  text-indent: -30000px;
  border: none;
  width: 36px;
  height: 36px;
  cursor: pointer;
  will-change: opacity;
  padding: 0;
  background-image: url('/third_party/MaterialIcons/ic_search_white_24px.svg');
  z-index: 1000;
}

.filter-form__reset-icon {
  position: absolute;
  background: url('/third_party/MaterialIcons/ic_close_white_18px.svg') center center no-repeat;
  text-indent: -30000px;
  border: none;
  width: 36px;
  height: 36px;
  padding: 2px;
  top: 0;
  right: -9px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 500;
  cursor: pointer;
}

.app-header__filter--open {
  .app-header__title {
    opacity: 0;
  }

  .filter-form__filter-widget {
    width: 240px;
  }

  .filter-form__reset-icon {
    opacity: 1;
    pointer-events: auto;
  }

  .filter-form__filter-widget::after {
    transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (min-width: 645px) {

  .app-container.locked {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    margin-top: 56px;
  }

  .app-main__state-labels-container {
    display: flex;
  }

  .app-header.collapsed {
    transform: translateY(0);
  }

  .condition-name {
    display: none;
  }

  .property-name {
    flex: 1;
    line-height: 24px;
  }

  .app-main__property-link {
    display: flex;
    flex-direction: row;
  }

  .app-main__property-state {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 0;
    justify-content: space-between;
  }

  .app-main__property-state-entry {
    padding: 0;
  }

  .app-main__engine-labels:first-of-type,
  .app-header__labels:first-of-type {
    visibility: visible;
  }

  .app-main__engine-legend-item {
    display: inline-block;
    padding: 0 0.8em 0 0;
  }

  .app-header__labels-container::before {
    content: '';
    flex: 1;
    display: block;
  }

  .app-main__property {

    will-change: transform;
    transition: transform 0.200s cubic-bezier(0,0,0.21,1);

    &.up {
      transform: translateY(-16px);
    }

    &.down {
      transform: translateY(412px);
    }
  }

  .app-main__engine-labels-container,
  .app-main__engine-legend-container,
  .app-main__state-labels-container {

    will-change: transform;
    transition: transform 0.200s cubic-bezier(0,0,0.21,1);

    &.up {
      transform: translateY(-16px);
    }
  }

  .property-details {

    z-index: 0;

    &.expanded {

      .property-details__background {
        position: absolute;
        box-shadow: 0px 2px 9px 0px rgba(0,0,0,0.24);
        width: 842px;
        left: -421px;
        height: 452px;
        top: 0;
      }

      .property-details__masthead {
        position: absolute;
        height: 160px;
      }
    }
  }

  .property-details__content {
    position: absolute;
    max-width: 842px;
    transform: translateX(-50%);
    height: 452px;
    top: 0;
    display: flex;
    flex-direction: column;
  }

  .property-details__content-body {
    flex-direction: row;
    flex: 1;
    padding: 0;
    margin-top: 160px;
  }

  .property-details__content-header {
    height: 160px;
    position: absolute;
  }

  .property-details__property-description {
    padding: 16px 0 16px 16px;
    order: 1;
    height: 292px;
    max-width: initial;
    border-right: 1px solid #DDDDDD;
    box-sizing: border-box;
  }

  .property-details__breakdown {
    padding-top: 16px;
    order: 2;
    display: flex;
    flex-direction: column;
    width: 224px;
    height: 224px;
    justify-content: space-around;
    align-items: center;
    flex: initial;
  }

  .property-details__masthead {
    position: absolute;
    left: -421px;
    width: 842px;
    top: 0;
  }

  .property-details__property-description {
    flex: 1;

    p {
      max-width: 432px;
    }
  }

  .property-details__property-name {
    font-size: 24px;
  }

  .app-header__filter--open {
    .app-header__title {
      opacity: 1;
    }

    .filter-form__filter-widget {
      width: 360px;
    }
  }
}

@font-face {
  font-family: 'RobotoMono';
  font-style: normal;
  font-weight: 400;
  src: url(/third_party/Roboto/RobotoMono-400.woff) format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(/third_party/Roboto/Roboto-400.woff) format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(/third_party/Roboto/Roboto-500.woff) format('woff');
}
